<template>
    <div id="mapContainer"></div>
</template>
  
<script lang="ts" setup>
import { onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader'


const initMap = () => {
    console.log('hihihi initMap')
    AMapLoader.load({
        key: '05497d6de5c1d12b6a165644e05a10cf',
        version: '1.4.15',
        plugins: [
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.HawkEye',
            'AMap.MapType',
            'AMap.MarkerClusterer',
            'AMap.MassMarks',
            'AMap.Geolocation',
            'AMap.DistrictSearch',
            'AMap.GeoJSON',
            'AMap.convertFrom',
            'AMap.event'
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等


    })
        .then(AMap => {

            findMask(AMap);
        })
        .catch(e => {
            console.log(e)
        })
}

const findMask = (AMap) => {

    // console.log('hihihi findMask')

    const district = new AMap.DistrictSearch({ subdistrict: 0, extensions: 'all', level: 'district' });
    district.search('蒲县', function (status, result) {
        // 查询成功时，result即为对应的行政区信息
        // console.log('DistrictSearc result', result) // 这里是整个郑州市的边界经纬度
        // console.log('DistrictSearc result boundaries', result.districtList[0].boundaries) // 这里是整个郑州市的边界经纬度
        const bounds = result.districtList[0].boundaries

        const mask = []
        for (let i = 0; i < bounds.length; i++) {
            mask.push([bounds[i]])
        }

        setupMap(AMap, mask);

    });

}

const setupMap = (AMap, mask) => {
    console.log('setupMap result', mask) // 这里是整个郑州市的边界经纬度

    var map = new AMap.Map('mapContainer', {
        // mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 12, //初始化地图层级
        center: [111.096439, 36.411827], //初始化地图中心点
        // pitch: 60,
        // rotation: -35,
        // features: ['bg', 'road'],s
        // mapStyle: 'amap://styles/grey',
        mapStyle: 'amap://styles/b7c9e8d817a8886ad7a0ceec47cd7026',
        // layers: [
        //     new AMap.TileLayer(),//高德默认标准图层
        //     // 高德默认标准图层
        //     new AMap.TileLayer.Satellite(),
        //     // 楼块图层
        //     // new AMap.Buildings({
        //     //     zooms: [16, 18],
        //     //     zIndex: 10,
        //     //     heightFactor: 2//2倍于默认高度，3D下有效
        //     // })
        // ]
    });

    // 添加控制条
    // map.addControl(new AMap.ToolBar());
    // 添加比例尺
    map.addControl(new AMap.Scale());

    // var trafficLayer = new AMap.TileLayer.Traffic({
    //     mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
    //     zIndex: 11
    // });

    // var roadNetLayer = new AMap.TileLayer.RoadNet({
    //     mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
    //     zIndex: 10
    // });


    // var layerGroup = new AMap.LayerGroup([roadNetLayer]);
    // layerGroup.setMap(map);


    let polygons = [];
    if (mask) {
        for (var i = 0, l = mask.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
                strokeWeight: 1,
                path: mask[i],
                fillOpacity: 0.05,
                fillColor: '#80d8ff',
                strokeColor: '#0091ea'
            });
            polygons.push(polygon);
        }
    }
    //TODO
    map.add(polygons)

    setupMarks(AMap, map, mask);

}

const setupMarks = (AMap, map, mask) => {
    console.log('mask', mask)
    const markers = mask[0][0].map((point) => {

        var marker = new AMap.Marker({
            // position: [point.lng, point.lat],
            position: point,
            title: 'hihihi',
            icon: new AMap.Icon({
                image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
            }),
            // map: map,
        });

        var infoWindow = new AMap.InfoWindow({
            isCustom: false,
            offset: new AMap.Pixel(0, -30)
        });

        // 设置标记点点击事件
        marker.on('click', function () {
            infoWindow.setContent('这是信息窗体的内容');
            infoWindow.open(map, marker.getPosition());
        });

        return marker;
    });

    // map.add(markers)

    var styles = [
        {
            url: "https://a.amap.com/jsapi_demos/static/images/green.png",
            size: new AMap.Size(32, 32),
            offset: new AMap.Pixel(-16, -16),
            // textColor: '#FFFFFF',
        },
        {
            url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
            size: new AMap.Size(36, 36),
            offset: new AMap.Pixel(-18, -18),
            // textColor: '#FFFFFF',
        },
        {
            url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
            size: new AMap.Size(48, 48),
            offset: new AMap.Pixel(-24, -24),
            textColor: '#FFFFFF',
        }
    ];
    const cluster = new AMap.MarkerClusterer(map, markers, {
        gridSize: 80,
        maxZoom: 18,
        // zoomOnClick: false,
        clusterMarkerOptions: {
            // 将聚合策略更改为按距离聚合
            clusterType: AMap.MarkerClusterer.SPLIT_BY_DISTANCE,
            // 设置距离阈值，小于该值的点会被分开显示
            distance: 20
        },
        styles: styles // 应用自定义样式
    });

    cluster.setMap(map);

}

onMounted(() => {
    console.log('hihihi')
    setTimeout(() => {
        console.log('hihihi setTimeout')
        initMap();
    }, 1000)
})

</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}

#mapContainer {

    height: 100%;
    width: 100%;
    /* height: 800px;
    width: 1000px; */


}
</style>
  